<template>
    <div class="detail-bottom-bar">
        <div class="bar-left bar-item">
            <ul>
                <li>
                    <i class="icon icon1"></i>
                    <span>客服</span>
                </li>
                 <li>
                    <i class="icon icon2"></i>
                    <span>店铺</span>
                </li>
                 <li>
                    <i class="icon"></i>
                    <span>收藏</span>
                </li>
            </ul>
        </div>
        <div class="bar-right bar-item">
            <span class="car" @click="addToCar">加入购物车</span>
            <span class="buy">购买</span>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        addToCar() {
            this.$emit('addToCar')
        }
    }
    
}
</script>

<style scoped>
    .detail-bottom-bar{
        /* z-index: 999; */
        height: 49px;
        /* position: fixed;
        width: 100%;
        left: 0;
        bottom: 0; */
        position: relative;
        /* bottom: 49px; */
        display: flex;
    }

    .bar-item{
            flex: 1;
        }

    .bar-left{
        background: rgb(140, 217, 156);
        background: #fff;
    }
    
    .bar-left ul{
        display: flex;
        height: 49px;
        align-items: center;
        /* text-align: center; */
    }

    .bar-left ul li{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

    .bar-left ul li .icon{
        width: 22px;
        height: 22px;
        background: url("~assets/img/common/detail/detail_bottom.png") no-repeat left top/ 22px 150px;
        margin-bottom: 2px;        
    }

    .bar-left ul li .icon1{
        background-position: 0 -53px;
    }

    .bar-left ul li .icon2{
        background-position: 0 -98px;
    }

    

    .bar-right{
        display: flex;
    }

    .bar-right span{
        flex: 1;
        text-align: center;
        line-height: 49px;
    }

    .bar-right .car{
        background: #fcfc0c;
    }

    .bar-right .buy{
        /* background: var(--color-tint); */
        background: #f4758c;
    }

    
</style>